<template>
	<div>
		<Header></Header>
		<el-container>

			<el-aside style="height: auto;width: 310px;line-height: 100px;margin-top: 10px !important;">
				<div style="margin-top: 10px;">
					<el-button type="primary" @click="handleAddTop" v-if="user.id === -999">{{$t('company.newGroup')}}</el-button>
					<el-tree :data="treedata" default-expand-all :props="defaultProps" :expand-on-click-node="false" style="font-size: 18px;line-height: 30px">
						<span class="custom-tree-node" slot-scope="{ node, data }">
							<div style="width:210px;"><span @click="shownode(data)" style="overflow: hidden;
        text-overflow: ellipsis; -o-text-overflow: ellipsis;  white-space:nowrap;
        width:150px; display:block;text-align: left;"
								 :title="data.text">
									{{ data.text }}
								</span></div>
							<div style="float: right;margin-top: -30px; margin-left: 5px;">
								<i class="el-icon-circle-plus-outline" @click="addNode(node, data)"></i>
								<i class="el-icon-edit" v-if="node.level !== 1 || user.id === -999" @click="editNode(node, data)"></i>
								<i v-show="user.companyId != data.id" class="el-icon-remove-outline" @click="delNode(node, data)"></i>
							</div>
						</span>
					</el-tree>
				</div>
			</el-aside>
			<el-dialog :title="titleForm" :visible.sync="showdialogroot" :show-close="false">
				<el-row style="width: 40%;margin-left: 30%">
					<el-form :model="addForm" :rules="addRules" ref="addForm" label-width="100px">
						<el-form-item :label="$t('company.groupName')" prop="title" label-width="120px" v-if="flag">
							<el-input v-model="addForm.title" style="width: 90%"></el-input>
						</el-form-item>
						<el-form-item :label="$t('company.contact')" prop="contact" label-width="120px" v-if="flag">
							<el-input v-model="addForm.contact" style="width: 90%"></el-input>
						</el-form-item>
						<el-form-item :label="$t('company.contactPhone')" prop="phoneno" label-width="120px" v-if="flag">
							<el-input v-model="addForm.phoneno" style="width: 90%"></el-input>
						</el-form-item>
						<el-form-item :label="$t('company.contactMail')" prop="email" label-width="120px" v-if="flag">
							<el-input v-model="addForm.email" style="width: 90%"></el-input>
						</el-form-item>
						<el-form-item :label="$t('company.resolvingPower')" prop="resolution" label-width="120px">
							<el-select v-model="addForm.resolution" style="width: 90%">
								<el-option v-for="type in resolutionTypes" :key="type.value" :label="type.label" :value="type.value"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item :label="$t('company.Time')" prop="totalDuration" label-width="120px">
							<el-input v-model="addForm.totalDuration" style="width: 90%"></el-input>
						</el-form-item>
					</el-form>
				</el-row>

				<span slot="footer" class="dialog-footer">
					<el-button @click="showdialogroot = false">{{$t('standard.cancel')}}</el-button>
					<el-button type="primary" @click="addGroup()" :loading="saving">{{$t('standard.confirm')}}</el-button>
				</span>

			</el-dialog>


			<el-main v-show="showMain" style="margin-top: 10px !important;">
				<el-row style="text-align: left;height: 50px;">
					<div style="font-size: 36px;height: 50px;width: auto">{{groupName}}</div>
				</el-row>
				<el-tabs v-model="activeName" @tab-click="tabClick">
					<el-tab-pane :label="$t('header.device')" name="device">
						<device ref="device"></device>
					</el-tab-pane>

					<el-tab-pane :label="$t('header.videoConference')" name="videoConference">
						<videoConference ref="videoConference"></videoConference>
					</el-tab-pane>

					<el-tab-pane :label="$t('header.faceRecognition')" name="person">
						<persons ref="persons"></persons>
					</el-tab-pane>
					<el-tab-pane :label="$t('header.imageRecognition')" name="media">
						<mediaVue ref="media"></mediaVue>
					</el-tab-pane>
				</el-tabs>
			</el-main>
			<el-main v-show="!showMain" style="margin-top: 10px !important;">
				<el-row style="text-align: left;height: 50px;margin-bottom: 10px">
					<div style="font-size: 36px;height: 50px;">{{$t('header.device')}}</div>
				</el-row>
				<device-all ref="deviceAll"></device-all>
			</el-main>
		</el-container>
	</div>

</template>
<script>
	import company from './company'

	export default company;
</script>
<style>
	.el-header,
	.el-footer {
		background-color: #B3C0D1;
		color: #333;
		text-align: center;
		line-height: 60px;
	}

	.el-aside {
		margin-top: 60px;
		background-color: white;
		color: #333;
		text-align: center;
		line-height: 100px;
	}

	.el-main {
		margin-top: 60px;
		background-color: #ffffff;
		color: #333;
		text-align: center;
		/*line-height: 160px;*/
	}

	body>.el-container {
		margin-bottom: 10px;
		margin-top: 10px;
	}

	/* .el-container:nth-child(5) .el-aside,
     .el-container:nth-child(6) .el-aside {
         line-height: 260px;
     }

     .el-container:nth-child(7) .el-aside {
         line-height: 320px;
     }*/
</style>
